<template>
  <div>
    <!--  头部  -->
    <header>
      <nav-top :classId="searchId"></nav-top>
    </header>
    <section>
      <div class="search-head">
        <div>
          <div
            class="search-nav"
            :class="{ 's-active': nav_index === s_index }"
            @click="getIndex(s_index)"
            v-for="(s_item, s_index) in searchNavItem"
            :key="s_index"
          >
            {{ s_item }}
          </div>
          <div class="sort-time">时间不限<i class="icon-ud-arrow"></i></div>
        </div>
      </div>
      <!--   主体界面   -->
      <div class="main">
        <!--    文章界面    -->
        <div class="content">
          <div class="all-item">
            <div
              v-for="(a_item, a_index) in articleItem"
              :key="a_index"
              v-show="nav_index === 0"
            >
              <h3>{{ a_item.title }}</h3>
              <div class="content-items">
                <div class="user-info-card">
                  <img :src="a_item.avatar" alt="" />
                  <span>{{ a_item.name }}，</span>
                  <span>{{ a_item.state }}</span>
                </div>
                <div class="search-content">{{ a_item.countNew }}</div>
                <div class="article-hot">
                  {{ a_item.likeNum }} 赞同 · {{ a_item.commitNum }} 评论
                </div>
              </div>
            </div>
          </div>
          <div class="user-item">
            <div
              v-for="(u_item, u_index) in userItem"
              :key="u_index"
              v-show="nav_index === 1"
            >
              <img :src="u_item.img_src" alt="" />
              <div>
                <h4>{{ u_item.user_name }}<i class=""></i></h4>
                <p>{{ u_item.user_info }}</p>
                <div>
                  {{ u_item.user_answer_num }} 回答 ·
                  {{ u_item.user_article_num }} 文章 ·
                  {{ u_item.user_follow_num }} 关注者
                </div>
              </div>
              <el-button type="success" class="btn-follow">
                <i class="el-icon-plus"></i>关注他
              </el-button>
            </div>
          </div>
          <div class="user-topic">
            <div
              v-for="(t_item, t_index) in topicItem"
              :key="t_index"
              v-show="nav_index === 2"
            >
              <img :src="t_item.img_src" alt="" />
              <div>
                <h4>{{ t_item.user_name }}<i class=""></i></h4>
                <p>{{ t_item.user_content.slice(0, 30) + "..." }}</p>
                <div>
                  {{ t_item.user_answer_num }} 关注 ·
                  {{ t_item.user_article_num }} 问题 ·
                  {{ t_item.user_follow_num }} 精华内容
                </div>
              </div>
              <el-button type="success" class="btn-follow">
                <i class="el-icon-plus"></i>关注他
              </el-button>
            </div>
          </div>
        </div>
        <!--    右侧导航    -->
        <div class="nav-right">
          <div class="hot-card">
            <h4>热搜</h4>
            <div>
              <p v-for="(h_item, h_index) in hot_item" :key="h_index">
                <span>{{ h_item }}</span>
                <i class="icon-fire" v-if="h_index < 3"></i>
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      searchId: 0,
      nav_index: 0,
      searchValue: "",
      searchNavItem: ["综合", "用户", "话题"],
      hot_item: [
        "日剧轮到你了反击篇",
        "SKT 问鼎 LCK",
        "RNG 获得 S9 门票",
        "周冬雨问周冬雨排列",
        "FPX 晋级 LPL 决赛",
        "漆培鑫承认恋情"
      ],
      articleItem: [
        {
          title: "学法律后，对你最大的影响或改变是什么？",
          avatar: require("../assets/images/user-avatar.png"),
          name: "巩大炮",
          state: "在校大学生",
          countNew: "",
          likeNum: "4,112",
          commitNum: "111",
          content:
            "就我个人的经历来看，我比较推荐自考。很多人都说自考难，的确，在自考的过程中我无数次的想放弃，但是我想不管是自考还是成考，只要走上了这条路，都要经受内心的煎熬和身心摧残。但是，一旦你真的想改变自己，沉下心来朝着一个方向努力学习才是王道，当你真的走过这一遭后，你会发现你所受的苦都是值得的就我个人的经历来看，我比较推荐自考。很多人都说自考难，的确，在自考的过程中我无数次的想放弃，但是我想不管是自考还是成考，只要走上了这条路，都要经受内心的煎熬和身心摧残。但是，一旦你真的想改变自己，沉下心来朝着一个方向努力学习才是王道，当你真的走过这一遭后，你会发现你所受的苦都是值得的。"
        },
        {
          title: "学法律后，对你最大的影响或改变是什么？",
          avatar: require("../assets/images/user-avatar.png"),
          name: "巩大炮",
          state: "在校大学生",
          countNew: "",
          likeNum: "4,112",
          commitNum: "111",
          content:
            "就我个人的经历来看，我比较推荐自考。很多人都说自考难，的确，在自考的过程中我无数次的想放弃，但是我想不管是自考还是成考，只要走上了这条路，都要经受内心的煎熬和身心摧残。但是，一旦你真的想改变自己，沉下心来朝着一个方向努力学习才是王道，当你真的走过这一遭后，你会发现你所受的苦都是值得的就我个人的经历来看，我比较推荐自考。很多人都说自考难，的确，在自考的过程中我无数次的想放弃，但是我想不管是自考还是成考，只要走上了这条路，都要经受内心的煎熬和身心摧残。但是，一旦你真的想改变自己，沉下心来朝着一个方向努力学习才是王道，当你真的走过这一遭后，你会发现你所受的苦都是值得的。"
        },
        {
          title: "学法律后，对你最大的影响或改变是什么？",
          avatar: require("../assets/images/user-avatar.png"),
          name: "巩大炮",
          state: "在校大学生",
          countNew: "",
          likeNum: "4,112",
          commitNum: "111",
          content:
            "就我个人的经历来看，我比较推荐自考。很多人都说自考难，的确，在自考的过程中我无数次的想放弃，但是我想不管是自考还是成考，只要走上了这条路，都要经受内心的煎熬和身心摧残。但是，一旦你真的想改变自己，沉下心来朝着一个方向努力学习才是王道，当你真的走过这一遭后，你会发现你所受的苦都是值得的就我个人的经历来看，我比较推荐自考。很多人都说自考难，的确，在自考的过程中我无数次的想放弃，但是我想不管是自考还是成考，只要走上了这条路，都要经受内心的煎熬和身心摧残。但是，一旦你真的想改变自己，沉下心来朝着一个方向努力学习才是王道，当你真的走过这一遭后，你会发现你所受的苦都是值得的。"
        },
        {
          title: "学法律后，对你最大的影响或改变是什么？",
          avatar: require("../assets/images/user-avatar.png"),
          name: "巩大炮",
          state: "在校大学生",
          countNew: "",
          likeNum: "4,112",
          commitNum: "111",
          content:
            "就我个人的经历来看，我比较推荐自考。很多人都说自考难，的确，在自考的过程中我无数次的想放弃，但是我想不管是自考还是成考，只要走上了这条路，都要经受内心的煎熬和身心摧残。但是，一旦你真的想改变自己，沉下心来朝着一个方向努力学习才是王道，当你真的走过这一遭后，你会发现你所受的苦都是值得的就我个人的经历来看，我比较推荐自考。很多人都说自考难，的确，在自考的过程中我无数次的想放弃，但是我想不管是自考还是成考，只要走上了这条路，都要经受内心的煎熬和身心摧残。但是，一旦你真的想改变自己，沉下心来朝着一个方向努力学习才是王道，当你真的走过这一遭后，你会发现你所受的苦都是值得的。"
        }
      ],
      userItem: [
        {
          img_src: require("../assets/images/avatar(1).png"),
          user_name: "法律小知识",
          user_info: "律师、合伙人、男",
          user_answer_num: 339,
          user_article_num: 5,
          user_follow_num: "4,567",
          is_follow: false
        },
        {
          img_src: require("../assets/images/avatar(1).png"),
          user_name: "法律小知识",
          user_info: "律师、合伙人、男",
          user_answer_num: 339,
          user_article_num: 5,
          user_follow_num: "4,567",
          is_follow: false
        },
        {
          img_src: require("../assets/images/avatar(1).png"),
          user_name: "法律小知识",
          user_info: "律师、合伙人、男",
          user_answer_num: 339,
          user_article_num: 5,
          user_follow_num: "4,567",
          is_follow: false
        }
      ],
      topicItem: [
        {
          img_src: require("../assets/images/avatar(1).png"),
          user_name: "法律",
          user_content:
            "宪法是高于其它法律部门（法律、行政法规、地方性法规、自治条例和单",
          user_answer_num: 339,
          user_article_num: 5,
          user_follow_num: "4,567",
          is_follow: false
        },
        {
          img_src: require("../assets/images/avatar(1).png"),
          user_name: "法律",
          user_content:
            "宪法是高于其它法律部门（法律、行政法规、地方性法规、自治条例和单",
          user_answer_num: 339,
          user_article_num: 5,
          user_follow_num: "4,567",
          is_follow: false
        },
        {
          img_src: require("../assets/images/avatar(1).png"),
          user_name: "法律",
          user_content:
            "宪法是高于其它法律部门（法律、行政法规、地方性法规、自治条例和单",
          user_answer_num: 339,
          user_article_num: 5,
          user_follow_num: "4,567",
          is_follow: false
        }
      ]
    };
  },
  created() {
    this.searchValue = this.$route.query.val;
    console.log(this.searchValue);
  },
  mounted() {
    this.countWord();
  },
  methods: {
    countWord: function() {
      let item = this.articleItem;
      item.forEach(item => {
        item.countNew = item.content.slice(0, 60) + "...";
        //计算有无图片时的初始布局
        if (item.isShow || !item.imgSrc) {
          item.colNum = 24;
        } else {
          item.colNum = 16;
        }
      });
      this.items = item;
    },
    getIndex(index) {
      this.nav_index = index;
    }
  },
  computed: {}
};
</script>

<style scoped lang="less">
/*头部*/
header {
  z-index: 9999;
  position: fixed;
  top: 0;
  width: 100%;
  padding: 10px 0;
  background-color: #fff;
  box-shadow: 0 2px 2px 0 rgba(237, 237, 237, 0.4);
}
section {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  margin-top: 55px;
  background-color: #f6f6f6;
  .search-head {
    width: 100%;
    background-color: #fff;
    & > div {
      display: flex;
      align-items: center;
      width: 1000px;
      margin: 0 auto;
      padding: 20px 40px;
      box-sizing: border-box;
      .search-nav {
        position: relative;
        margin-right: 50px;
        font-size: 16px;
        color: #000;
        cursor: pointer;
      }
      .s-active {
        font-weight: bold;
        &:after {
          position: absolute;
          bottom: -20px;
          left: 0;
          display: inline-block;
          width: 100%;
          border-bottom: 4px solid #6b9147;
          content: "";
        }
      }
      .sort-time {
        margin-left: 325px;
        font-size: 14px;
        color: #7d8178;
        cursor: pointer;
        i {
          display: inline-block;
          width: 9px;
          height: 13px;
          margin-left: 5px;
          background-size: 100% 100%;
        }
      }
    }
  }

  .main {
    display: flex;
    justify-content: space-between;
    width: 1000px;
    margin: 15px auto 0;
    padding: 0 15px;
    box-sizing: border-box;

    .content {
      width: 69%;
      height: 100%;
      border-radius: 2px;
      box-sizing: border-box;
      box-shadow: 0 1px 1px 0 rgba(237, 237, 237, 0.4);
      .all-item > div {
        padding: 30px;
        margin-bottom: 10px;
        background-color: #fff;
        box-sizing: border-box;
        h3 {
          color: #000;
          &:hover {
            color: #175200;
            cursor: pointer;
          }
        }
        .content-items {
          color: #000;
          .user-info-card {
            display: flex;
            align-items: center;
            margin: 20px 0;
            img {
              width: 40px;
              height: 40px;
              padding-right: 15px;
            }
            span:nth-child(2) {
              font-size: 15px;
              font-weight: bold;
              color: #333;
            }
            span:nth-child(3) {
              font-size: 14px;
              color: #454545;
            }
          }
          .search-content {
            line-height: 30px;
            font-size: 15px;
            color: #000;
          }
          .article-hot {
            margin-top: 20px;
            font-size: 15px;
            color: #95998f;
          }
        }
      }
      .user-item > div {
        display: flex;
        align-items: center;
        padding: 15px;
        margin-bottom: 10px;
        box-sizing: border-box;
        background-color: #fff;
        & > img {
          width: 60px;
          height: 60px;
          margin-right: 10px;
        }
        & > div {
          p {
            margin: 5px 0;
            font-size: 15px;
          }
          div {
            font-size: 15px;
            color: #95998f;
          }
        }
        & > button {
          width: 100px;
          height: 35px;
          margin-left: auto;
        }
      }
      .user-topic > div {
        display: flex;
        align-items: center;
        padding: 15px;
        margin-bottom: 10px;
        box-sizing: border-box;
        background-color: #fff;
        & > img {
          width: 60px;
          height: 60px;
          margin-right: 10px;
        }
        & > div {
          p {
            margin: 5px 0;
            font-size: 15px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          div {
            font-size: 15px;
            color: #95998f;
          }
        }
        & > button {
          width: 100px;
          height: 35px;
          margin-left: auto;
        }
      }
    }
    .nav-right {
      width: 30%;
      height: 100%;
      border-radius: 2px;
      box-sizing: border-box;
      box-shadow: 0 1px 1px 0 rgba(237, 237, 237, 0.4);
      .hot-card {
        background-color: #fff;
        h4 {
          padding: 10px 20px;
          border-bottom: 1px solid #eaeaea;
        }
        div {
          padding: 10px 20px;
          font-size: 14px;
          line-height: 35px;
          i {
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-left: 5px;
            vertical-align: middle;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}

/*主体*/
</style>
